﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>flot trend line demo</title>
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->
    <script src="../lib//jquery.js" type="text/javascript"></script>
    <script src="../lib/mstar.flot.trend.js" type="text/javascript"></script>
	<link type="text/css" href="../css/quote2.css"/>
    <style>
    	body{font-size:12px;}
    	.rtq-chart-hover-hint{position:absolute;padding:3px 8px 3px 8px;}
		.addTrendLineHint{border:1px #777 solid;white-space:nowrap;background-color:#b7b7b7;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;clear:both;cursor:pointer;z-index:50;}
		.changeHintDiv{padding:1px 4px 2px 4px;}
		.wrap-text-close{padding:2px;border:1px #777 solid;white-space:nowrap;background-color:#b7b7b7;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;clear:both;cursor:pointer;z-index:50;}
		.wrap-img{position:relative;}
		.wrap-img img.arrow{position:absolute;top:4px;left:-12px;z-index:100;}		
		.rtc-ctrl-add-button { height:13px; width:auto; border-color:#6B6B6B #B9B9B9 #ddd; border-style:solid; border-width:1px; color:#333; display:inline; float:left; padding:2px 4px; margin: 4px 0 0 -1px; background-color:#fff;text-decoration:none;}
    </style>
</head>
<body>
<div style="width:100%; float:left">
<div id="chart" style="width:800px; height:300px;border:1px solid black"></div>
</div>
<br/>

<div style="width:100%; margin-top:30px; margin-left:10px;float:left">


<div><input type="button" name="addTrendLine" value="增加一条趋势线" onclick="addTrendLine(this)"/><br/><br/><br/>
number of points:<input id = "pNum" type="text" class="input-box" value="200"/></div><br/><br/>
<div><input value="Change numbers of data points" type="button" onclick="changePoint()" class = "btn"/></div>
<br/>
<div id="tt"></div>

<a class="rtc-ctrl-add-button" onclick="javascript:alert(2)">dsfsad</a>
</body>
<script>
var container = $("#chart");
var flotObj = null;
var num = 200;
var ticksize = 30;
$(".rtc-ctrl-add-button").attr("onclick","javascript:return false;");
var data = [{data:[[2,100],[4,40],[6,50],[8,60],[10,70]],lines:{show:true},yaxis:1,color:0}
]                   
function getOption(){
    return { xaxis: { mode:null,tickSize:ticksize,showLabel:true,ticks:null,
                      tickFormatter:null},       
                      yaxis: {
					  	labelWidth: 50,
					  	labelHeight: 12
					  },
					  lines:{
					  	fill:true
					  },
					  grid:{
					  	clickable:true,
						hoverable:true
					  }
                      
            };
}
function generateChartData(num) {
    var lineData =[], barData = [];
    for(var i = 0; i < num; i++) {
        lineData[i] = [i,Math.random()*50+10];
    }
    data[0].data = lineData;
}
function draw() {
    if (flotObj == null) {
        flotObj = new mstar.flot("chart",getOption());
    }
    flotObj.init(data);
	container.bind("filishTrendLine",function(){
		$("input[name='addTrendLine']").attr("disabled","");
	});
}
generateChartData(200);
draw();
function addTrendLine(e){
	flotObj.trendLineAble = true;
	
}



function changePoint(){
    var n = document.getElementById("pNum").value;
    num = isNaN(parseInt(n,10))?200:parseInt(n,10);
    generateChartData(num);
    ticksize = num /8;
    flotObj.setOption({xaxis:{tickSize:ticksize}});
    flotObj.init(data);
}

</script>
</html>
